<template>
  <div class="app-container">
    <div class="bg-q">
      <img src="@/assets/images/bg.png" style="width: 600px" />
      <div class="qr-c">
        <canvas id="canvas" />
      </div>
    </div>

    <div style="margin-top: -100px; position: relative">
      <el-button style="width: 300px" type="primary" @click="getQrcode"
        >下载二维码</el-button
      >
    </div>
  </div>
</template>
<script>
import QRCode from "qrcode";
export default {
  name: "Qrcode",
  data() {
    return {};
  },
  mounted() {
    console.log(this.$store.state.user);
    let school = "";
    let schoolId = "";
    if (this.$store.state?.user?.roles[0] === "school") {
      school = this.$store.state.user.nickName;
      schoolId = this.$store.state.user.deptId;
    }
    console.log(
      encodeURI(
        `http://localhost:8082/#/pages/index/index?school=${school}&schoolId=${schoolId}`
      )
    );
    const path = `http://123.54.7.109:8585/#/pages/index/index?school=${school}&schoolId=${schoolId}`;
    const url = encodeURI(path);
    console.log(url);
    const canvas = document.getElementById("canvas");
    QRCode.toCanvas(canvas, url, {
      width: 300,
      height: 300,
    });
  },

  methods: {
    getQrcode() {
      const canvas = document.getElementById("canvas");
      console.log(canvas.toDataURL("image/png"));
      const link = document.createElement("a");
      link.download = "qrcode.png";
      link.href = canvas.toDataURL("image/png");
      link.click();
    },
  },
};
</script>
<style scoped>
.app-container {
  height: calc(100vh - 84px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.bg-q {
  position: relative;
  /* width: 600px;
  height: 600px;
  background-image: url("../../../assets/images/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%; */
}
.qr-c {
  background-color: #ffffff;
  position: absolute;
  /* width: 320px;
  height: 320px; */
  display: flex;
  align-items: center;
  justify-content: center;
  top: 100px;
  left: 50%;
  margin-left: -150px;
}
</style>
